<template>
  <div class="animation" ref="animation">
    <div id="animatedElement"></div>
    <button @click="startAnimation()">开始动画</button>
    <button @click="pauseAnimation()">暂停动画</button>
    <button @click="stopAnimation()">停止动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
    let frameId; // 用于存储requestAnimationFrame的ID。
    let isPaused = false; // 控制动画是否暂停的标志。
    let position = 0; // 动画位置。
    const speed = 4; // 移动速度。
    const maxPosition = 800; // 最大移动距离。
    const element = document.getElementById("animatedElement");
    function animate() {
      if (!isPaused && position < maxPosition) {
        position += speed; // 更新位置。
        element.style.transform = `translateX(${position}px)`; // 应用样式。
        frameId = requestAnimationFrame(animate); // 请求下一帧。
      } else if (position >= maxPosition) {
        // 如果达到最大位置，可以选择重置位置或其他操作。
        cancelAnimationFrame(frameId); // 停止动画循环。
      } else {
        // 如果已暂停，则不进行任何操作。
        cancelAnimationFrame(frameId); // 停止动画循环。
      }
    }
    animate();
    function startAnimation() {
      isPaused = false; // 重置暂停标志。
      position = 0; // 重置位置。
      animate(); // 开始动画循环。
    }
    function pauseAnimation() {
      isPaused = true; // 设置暂停标志。
    }
    function stopAnimation() {
      cancelAnimationFrame(frameId); // 停止动画并重置位置。
      position = 0; // 重置位置。
      element.style.transform = `translateX(${position}px)`; // 应用新位置。
    }
    this.$refs.animation.style.animationPlayState = "running"; //运行动画
  },
};
</script>

<style lang="scss" scoped>
.animation {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  animation: change 4s;
  animation-play-state: paused; //暂停动画
  animation-iteration-count: infinite;
  #animatedElement {
    width: 200px;
    height: 200px;
    background: rgb(24, 213, 115);
    position: absolute;
    top: 100px;
  }
}
@keyframes change {
  0% {
    background-color: #f00;
  }
  12.5% {
    background-color: rgb(245, 131, 17);
  }
  25% {
    background-color: rgb(221, 204, 17);
  }
  37.5% {
    background-color: rgb(107, 224, 18);
  }
  50% {
    background-color: rgb(13, 75, 233);
  }
  62.5% {
    background-color: rgb(13, 203, 175);
  }
  75% {
    background-color: rgb(200, 15, 224);
  }
  87.5% {
    background-color: rgb(255, 0, 0);
  }
  100% {
    background-color: rgb(237, 243, 241);}
}
</style>